<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <tree-tool :nodeTree="title" :isHead="true" />
        <el-tree :data="departs" :props="defaultProps">
          <tree-tool slot-scope="{ data }" :nodeTree="data"  @delDepartment="delDepartment" @addDepartment="addDepartment"  @editDepartment="editDepartment"  />
          <!-- 前面的delDepartment这里相当于click，然后后面的delDepartment相当于方法名 -->
        </el-tree>
      </el-card>
      <!-- 添加子部门、编辑子部门的弹层 -->
      <detail :showDialog.sync="showDialog" @addDepartment="fetchData" :node="node" ref="deptForm"/>
    </div>
  </div>
</template>

<script>
import treeTool from "./components/treeTool.vue";
import detail from "./components/detail.vue";
import { getCompanyDepartment,delCompanyDepartment } from "@/api/departments";
import {transTree}from "@/utils/index.js"
export default {
  components: { treeTool, detail },
  data() {
    return {
      showDialog:false,
      node:null,
    
      title: {
        name: "嘻嘻嘻公司",
        manager: "负责人",
      },

      departs: [
        {
          name: "总裁办",
          manager: "曹操",
          children: [{ name: "董事会", manager: "曹丕" }],
        },
      ],
        defaultProps: {
        label: "name",
        children:"children"
      },

    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const {depts} = await getCompanyDepartment();
      // 将扁平化数据转化为树形结构的数据
      this.departs= transTree(depts)
    },
    // 根据部门的id删除组织部门
   async delDepartment(id){
    console.log(id) //id是子组件treeTool传来的值
    await this.$confirm("您确定要删除该组织部门吗？")
    await delCompanyDepartment(id)
    await this.$message.success("删除成功")
    this.fetchData()
    },
    // 添加
    addDepartment(nodeTree){
      this.showDialog=true
      this.node=nodeTree  //nodeTree是子组件treeTool 传过来的值
      console.log(nodeTree.id)
    },
    // 编辑
    async editDepartment(nodeTree){
      this.showDialog=true
      this.node=nodeTree //nodeTree是子组件treeTool 传过来的值
      console.log(nodeTree.id)
      // console.log(this.$refs.deptForm)//获取子组件的所有东西
      this.$refs.deptForm.form=nodeTree
      // console.log(this.$refs.deptForm.form)
    }

  },
};
</script>

<style>
</style>
